// 社团管理
<template>
  <div class="m_team">
    <Spin size="large" fix v-if="spinShow"></Spin>
    <!-- 检索条件  社团名称 类型  等级-->
    <Row class="condition">
      <ul class="flex">
        <li>
          <span class="title">社团名称：</span>
          <Input type="text" style="width:150px" v-model="params.team.teamname" />
        </li>
        <li class="ml10">
          <span class="title">类型：</span>
          <Select v-model="params.team.type" style="width:150px">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </li>
        <li class="ml10" style="flex:1;">
          <span class="title">等级：</span>
          <Select v-model="params.team.level" style="width:150px">
            <Option :value="0">所有等级</Option>
            <Option v-for="item in levelList" :value="item" :key="item">{{item}}</Option>
          </Select>
        </li>
        <li>
          <Button type="primary" @click="getAllTeam">搜索</Button>
        </li>
      </ul>
    </Row>

    <!-- 表格 -->
    <Row class="mt20">
      <Table stripe :columns="columns" :data="teams"></Table>
    </Row>

    <!-- 分页 -->
    <div class="mdt20">
      <Page
        :total="total"
        :current="params.current"
        :page-size="params.size"
        class="page"
        @on-change="pageChange"
      />
    </div>
  </div>
</template>
<script>
import TeamService from "../../assets/js/team.js";
import ConfirmModal from "./confirmModal";
export default {
  name: "team",
  data() {
    return {
      params: {
        current: 1,
        size: 10,
        team: {
          teamname: "",
          type: 0,
          level: 0
        }
      }, //查询参数
      teams: [], //社团数据
      spinShow: false, //缓冲
      total: 0, //社团总数
      typeList: [
        {
          value: 0,
          label: "所有类型"
        },
        {
          value: 1,
          label: "思想理论类"
        },
        {
          value: 2,
          label: "文艺体育类"
        },
        {
          value: 3,
          label: "就业创业类"
        },
        {
          value: 4,
          label: "公益服务类"
        },
        {
          value: 5,
          label: "学术科研类"
        },
        {
          value: 6,
          label: "网络信息类"
        }
      ], //社团类型列表
      levelList: [1, 2, 3, 4, 5], //等级列表
      columns: [
        {
          title: "id",
          key: "id"
        },
        {
          title: "社团名称",
          key: "teamname"
        },
        {
          title: "社团宗旨",
          key: "theme"
        },
        {
          title: "当前人数",
          key: "persons"
        },
        {
          title: "管理员id",
          key: "teamManagerId"
        },
        {
          title: "社团类型",
          render: (h, params) => {
            let str = "";
            switch (params.row.type) {
              case 1:
                str = "思想理论类";
                break;
              case 2:
                str = "文艺体育类";
                break;
              case 3:
                str = "就业创业类";
                break;
              case 4:
                str = "公益服务类";
                break;
              case 5:
                str = "学术科研类";
                break;
              case 6:
                str = "网络信息类";
                break;
            }
            return h("div", str);
          }
        },
        {
          title: "社团等级",
          key: "level"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "操作",
          render: (h, params) => {
            let vm = this;
            let detailBtn = h(
              "Button",
              {
                props: {
                  type: "primary"
                },
                on: {
                  click: () => {
                    vm.$router.push({
                      path: "/team_detail",
                      query: { itemId: params.row.id }
                    });
                  }
                }
              },
              "查看"
            );
            let btns = [];
            btns.push(detailBtn);
            return h("div", btns);
          }
        }
      ]
    };
  },
  methods: {
    /*页码改变*/
    pageChange(page) {
      this.params.current = page;
      this.getAllTeam();
    },
    // 获取社团信息
    getAllTeam() {
      let vm = this;
      vm.spinShow = true;
      TeamService.getManageTeam(vm.params).then(res => {
        if (res.code == 0) {
          vm.teams = res.data.records;
          vm.total = res.data.total;
        } else {
          vm.$Message.error(res.msg);
        }
      });
      vm.spinShow = false;
    }
  },
  created() {
    this.getAllTeam();
  }
};
</script>
<style lang="scss">
// 检索条件
.m_team .condition li span.title {
  width: 80px;
}
</style>